/*
 * @Author: hongbin
 * @Date: 2022-04-28 19:22:28
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-30 08:26:46
 * @Description:第二板块 组件板块
 */
import { FC, ReactElement } from "react";
import styled, { css } from "styled-components";
import { flexCenter } from "../../styled";
import { rangeTrans } from "../../utils";
import computerImg from "../../assets/computerWrap.png";
import defaultImg from "../../assets/default.jpg";

interface IProps {
  secondPercent: number;
}

const IntroduceComponent: FC<IProps> = ({ secondPercent }): ReactElement => {
  return (
    <>
      <ComputerBox
        style={{
          opacity: rangeTrans(secondPercent, [-1, 2]),
          transform: `scale(${rangeTrans(
            secondPercent,
            [1.4, 0.6]
          )}) translate(${window.IsPhone ? "-50vw,-10vh" : 0})`,
          top:
            secondPercent > 1
              ? `${rangeTrans((secondPercent - 1) * 3, [0, -100])}vmin`
              : 0,
        }}
        src={computerImg}
        alt=""
      />
      <Block
        style={{
          transform: `scale(${rangeTrans(
            secondPercent,
            [1, 0.6]
          )}) translateY(${rangeTrans(secondPercent, [0, 8])}vmin)`,
          top:
            secondPercent > 1
              ? `${rangeTrans((secondPercent - 1) * 3, [0, -100])}vmin`
              : 0,
        }}
      >
        <Hgroup>
          <h1
            style={{
              opacity: rangeTrans(secondPercent, [-1, 2]),
            }}
          >
            丰富组件
          </h1>
          <h1
            style={{
              opacity: rangeTrans(secondPercent, [-2, 2]),
            }}
          >
            自由搭配
          </h1>
          <h2
            style={{
              opacity: rangeTrans(secondPercent, [-3, 2]),
            }}
          >
            搭积木体验
          </h2>
          <h3
            style={{
              opacity: rangeTrans(secondPercent, [-4, 2]),
            }}
          >
            多组件组合,整体操作
          </h3>
        </Hgroup>
        <ListBox
          style={{
            transform: `translate(${rangeTrans(
              secondPercent * 1.5,
              [0, -13]
            )}vmax,-20vmin)`,
          }}
        >
          <LinearGradientBg
            style={{
              opacity: rangeTrans(secondPercent, [-1, 2]),
            }}
          />
          <LinearGradient
            style={{
              opacity: rangeTrans(secondPercent * 4, [0, 2]),
              transform: `translateX(${rangeTrans(
                secondPercent * 4,
                [5, 0]
              )}vmax)`,
            }}
          >
            <Mask
              style={{
                opacity: rangeTrans(secondPercent * 3, [0, 0.2]),
                transform: `translateX(${rangeTrans(
                  secondPercent * 4,
                  [-14, 0]
                )}vmax)`,
              }}
            />
            <RoundImg
              style={{
                opacity: rangeTrans(secondPercent * 3, [-1, 2]),
                transform: `translateX(${rangeTrans(
                  secondPercent * 6,
                  [14, 0]
                )}vmax)`,
              }}
              src={defaultImg}
              alt=""
            />
            <Text
              style={{
                opacity: rangeTrans(secondPercent * 2, [-2, 3]),
                transform: `translateX(${rangeTrans(
                  secondPercent * 3,
                  [10, 0]
                )}vmax)`,
              }}
            >
              Hello
            </Text>
            <Desc
              style={{
                opacity: rangeTrans(secondPercent * 3, [-2, 2]),
                transform: `translateX(${rangeTrans(
                  secondPercent * 3,
                  [12, 0]
                )}vmax)`,
              }}
            >
              精美组件快捷拖拽
              <br /> 使用愉快🎉
            </Desc>
          </LinearGradient>

          <LinearGradient
            style={{
              opacity: rangeTrans(secondPercent * 1.5, [-1, 2]),
              transform: `translate(${rangeTrans(
                secondPercent * 1.5,
                [20, 0]
              )}%,110%)`,
            }}
          >
            <Mask />
            <RoundImg src={defaultImg} alt="" />
            <Text>Hello</Text>
            <Desc>
              精美组件快捷拖拽
              <br /> 使用愉快🎉
            </Desc>
          </LinearGradient>
          <LinearGradient
            style={{
              opacity: rangeTrans(secondPercent * 1.5, [-1, 1.5]),
              transform: `translate(${rangeTrans(
                secondPercent * 1.5,
                [40, 0]
              )}%,220%)`,
            }}
          >
            <Mask />
            <RoundImg src={defaultImg} alt="" />
            <Text>Hello</Text>
            <Desc>
              精美组件快捷拖拽
              <br /> 使用愉快🎉
            </Desc>
          </LinearGradient>
        </ListBox>
        {secondPercent > 0.2 ? (
          <ListBox
            style={{
              opacity: rangeTrans(secondPercent * 4, [0, 2]),
              transform: `translate(${rangeTrans(
                secondPercent * 1.5,
                [-13, 13]
              )}vmax,-20vmin)`,
            }}
          >
            <LinearGradientBg
              style={{
                opacity: rangeTrans(secondPercent, [-1, 2]),
              }}
            />
            <LinearGradient
              style={{
                opacity: rangeTrans(secondPercent * 4, [0, 2]),
                transform: `translateX(${rangeTrans(
                  secondPercent * 4,
                  [10, 0]
                )}vmax)`,
              }}
            >
              <Mask />
              <RoundImg src={defaultImg} alt="" />
              <Text>Hello</Text>
              <Desc>
                精美组件快捷拖拽
                <br /> 使用愉快🎉
              </Desc>
            </LinearGradient>

            <LinearGradient
              style={{
                opacity: rangeTrans(secondPercent * 1.5, [-1, 2]),
                transform: `translate(${rangeTrans(
                  secondPercent * 1.5,
                  [20, 0]
                )}%,110%)`,
              }}
            >
              <Mask />
              <RoundImg src={defaultImg} alt="" />
              <Text>Hello</Text>
              <Desc>
                精美组件快捷拖拽
                <br /> 使用愉快🎉
              </Desc>
            </LinearGradient>
            <LinearGradient
              style={{
                opacity: rangeTrans(secondPercent * 1.5, [-1, 1.5]),
                transform: `translate(${rangeTrans(
                  secondPercent * 1.5,
                  [40, 0]
                )}%,220%)`,
              }}
            >
              <Mask />
              <RoundImg src={defaultImg} alt="" />
              <Text>Hello</Text>
              <Desc>
                精美组件快捷拖拽
                <br /> 使用愉快🎉
              </Desc>
            </LinearGradient>
          </ListBox>
        ) : null}
      </Block>
    </>
  );
};

export default IntroduceComponent;

const Hgroup = styled.hgroup`
  position: fixed;
  left: 7vmax;
  top: 50vmin;
  color: ${(props) => props.theme.lightText};
  transform: translateY(-50%);
  & > * {
    margin-bottom: 4vmin;
  }
  & > :nth-child(1) {
    font-size: 5vmax;
  }
  & > :nth-child(2) {
    font-size: 4vmax;
  }
  & > :nth-child(3) {
    font-size: 3vmax;
  }
  & > :nth-child(4) {
    font-size: 2vmax;
  }
`;

const ListBox = styled.div`
  position: fixed;
  transform: translate(-50%, -50%);
`;

const LinearGradientBg = styled.div`
  width: 21.5vmax;
  height: 41vmin;
  position: absolute;
  background: linear-gradient(45deg, rgb(175, 90, 90), rgb(173, 143, 255));
  border-radius: 1vmax;
  top: -1vmin;
  left: -1vmin;
  ${(props) =>
    props.theme.mode === "dark" &&
    "background:linear-gradient(45deg,rgb(159 53 53),rgb(65 34 145))"};
`;

const Text = styled.p`
  color: ${(props) => props.theme.lightText};
  font-size: 1vmin;
  font-weight: bold;
  letter-spacing: 1px;
  top: 2.5vmin;
  left: 6vmax;
`;

const Desc = styled(Text)`
  font-size: 0.7vmax;
  top: 5.5vmin;
  font-weight: 200;
`;

const RoundImg = styled.img`
  border-radius: 2vmax;
  width: 4vmax;
  height: 4vmax;
  top: 2.5vmin;
  left: 1.5vmax;
`;

const LinearGradient = styled.div`
  position: absolute;
  width: 20vmax;
  height: 12vmin;
  background: linear-gradient(45deg, rgb(175, 90, 90), rgb(173, 143, 255));
  border-radius: 1vmax;
  & > * {
    position: absolute;
  }
  ${(props) =>
    props.theme.mode === "dark" &&
    "background:linear-gradient(45deg,rgb(159 53 53),rgb(65 34 145))"};
`;

const Mask = styled.div`
  background: #ffffff;
  opacity: 0.2;
  width: 19vmax;
  height: 10vmin;
  border-radius: inherit;
  left: 0.5vmax;
  top: 1vmin;
`;

const ComputerBox = styled.img`
  width: 100vmax;
  height: 130vh;
  z-index: 1;
  position: fixed;
  left: 0;
  top: -10vmin;
`;

const Block = styled.div`
  bottom: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: ${(props) => props.theme.primary};
  ${flexCenter};
  /* ${(props) =>
    props.theme.mode === "dark" &&
    css`
      filter: brightness(0.5);
    `}; */
`;
